import React, { useState, useEffect, useImperativeHandle } from "react";
import http from "../../utils/request";
import { Descriptions, Modal, Spin, Table, Tabs, } from "antd";
import style from "./tuixiu-detail.module.scss";
import { tuixiuDetailAPI } from "../../api/api";


const TuixiuDetailComponent = ({
    onRef
}) => {
    const [show, setShow] = useState(false);
    // 业务来源查询参数
    const [loading0, setLiading0] = useState(false);
    const [carDealerBusiNatureDTOList, setCarDealerBusiNatureDTOList] = useState({
        totalCount: 0,
        list: []
    });

    const [params0, setParams0] = useState({
        id: null
    })
    // 可修品牌查询参数
    const [loading1, setLoading1] = useState(false);
    const [carBrandDTOList, setCarBrandDTOList] = useState({
        list: [],
        totalCount: 0
    });
    const [params1, setParams1] = useState({
        pageSize: 20,
        pageIndex: 1
    })
    // 服务区域列表查询参数
    const [loading2, setLoading2] = useState(false);
    const [carDealerAreaDTOList, setCarDealerAreaDTOList] = useState({
        // totalCount: 0,
        list: []
    });
    const [params2, setParams2] = useState({
        pageSize: 20,
        pageIndex: 1
    })

    // 加载业务来源信息
    useEffect(() => {
        http.post({
            url: tuixiuDetailAPI,
            params: {
                ...params0
            },
            before: () => setLiading0(true),
            success: res => {
                const { carDealerBusiNatureDTOList = [], totalCount = 0 } = res?.data;
                setCarDealerBusiNatureDTOList({
                    list: carDealerBusiNatureDTOList,
                    totalCount: totalCount
                })
            },
            failure: msg => {

            },
            complete: () => setLiading0(false)
        })
    }, [params0])


    // 加载可修品牌列表
    useEffect(() => {
        http.post({
            url: tuixiuDetailAPI,
            params: {
                ...params1
            },
            before: () => setLoading1(true),
            success: res => {
                const { carBrandDTOList = [], totalCount = 0 } = res?.data;
                setCarBrandDTOList({
                    list: carBrandDTOList,
                    totalCount: totalCount

                })
            },
            failure: msg => {

            },
            complete: () => setLoading1(false)
        })
    }, [params1])

    // 加载服务区域列表
    useEffect(() => {
        http.post({
            url: tuixiuDetailAPI,
            params: {
                ...params2
            },
            before: () => setLoading2(true),
            success: res => {
                const { carDealerAreaDTOList = [], totalCount = 0 } = res?.data;
                setCarDealerAreaDTOList({
                    list: carDealerAreaDTOList,
                    // totalCount: totalCount
                })
            },
            failure: msg => {

            },
            complete: () => setLoading2(false)
        })
    }, [params2])




    const init = ({ id }) => {

        setShow(true);
        setParams0({
            id
        })

        setParams1({
            ...params2,
            id,
            pageSize: 20,
            pageIndex: 1
        })
        setParams2({
            ...params2,
            id,
            pageSize: 20,
            pageIndex: 1
        })
    }




    const [id, setId] = useState(null);



    const reset = () => {
        setId(null);
        setShow(false);
    }

    useImperativeHandle(onRef, () => ({
        init: init,
        reset
    }))

    // 业务信息columns
    const infoColumns = [
        {
            title: '业务来源名称',
            dataIndex: 'busiNatureName',
            key: 'busiNatureName'
        },
        {
            title: '业务来源代码',
            dataIndex: 'busiNatureNo',
            key: 'busiNatureNo'
        },
        {
            title: '合作开始时间',
            dataIndex: 'startTime',
            key: 'startTime'
        },
        {
            title: '业务员',
            dataIndex: 'businessOperator',
            key: 'businessOperator'
        },
        {
            title: '渠道属性',
            dataIndex: 'channelAttributes',
            key: 'channelAttributes'
        },
        {
            title: '品牌标识',
            dataIndex: 'brandMark',
            key: 'brandMark'
        },
        {
            title: '返修不成功是否推修',
            dataIndex: 'brandMifPushRepairark',
            key: 'brandMifPushRepairark'
        }
    ]

    // 可修品牌
    const columns = [
        {
            title: '车辆品牌名称',
            dataIndex: 'carbrandname',
            key: 'carbrandname'
        },
        {
            title: '车辆品牌代码',
            dataIndex: 'carBrandCode',
            key: 'carBrandCode'
        },
        {
            title: '维修厂名称',
            dataIndex: 'carFactoryName',
            key: 'carFactoryName'
        }
    ]


    // 服务区域
    const areaColumns = [
        {
            title: '所属省',
            dataIndex: 'provinceName',
            key: 'provinceName'
        },
        {
            title: '所属市',
            dataIndex: 'cityName',
            key: 'cityName'
        },
        {
            title: '所属区',
            dataIndex: 'areaName',
            key: 'areaName'
        }
    ]



    const onChange = (key) => {
        console.log(key);
    };


    return (
        <>
            <Modal
                title="推修详情"
                open={show}
                centered={true}
                width={1000}
                onCancel={() => reset()}
                footer={null}
                // styles={{
                //     height: 800
                // }}
                style={{
                    height: 800
                }}
            >
                <div className={style.module}>
                    <Tabs defaultActiveKey="1"
                        items={
                            [
                                {
                                    key: '0',
                                    label: "业务信息",
                                    children: <div className="card-box2">
                                        <div className="card-center">
                                            <Table
                                                loading={loading0}
                                                columns={infoColumns}
                                                scroll={{ y: 250 }}
                                                dataSource={ carDealerBusiNatureDTOList.list}
                                                pagination={{

                                                    total: carDealerBusiNatureDTOList.totalCount,
                                                    onChange: (value) => {
                                                        setParams1({
                                                            ...params0,
                                                            pageIndex: value
                                                        })
                                                    }
                                                }}
                                            />
                                        </div>
                                    </div>
                                },
                                {
                                    key: '1',
                                    label: '可修品牌',
                                    children: <div className="card-box2">
                                        <div className="card-center">
                                            <Table
                                                loading={loading1}
                                                columns={columns}
                                                scroll={{ y: 250 }}
                                                dataSource={carBrandDTOList.list}
                                                pagination={{

                                                    total: carBrandDTOList.totalCount,
                                                    onChange: (value) => {
                                                        setParams1({
                                                            ...params1,
                                                            pageIndex: value
                                                        })
                                                    }
                                                }}
                                            />
                                        </div>
                                    </div>,
                                },
                                {
                                    key: '2',
                                    label: '服务区域',
                                    children:
                                        <div className="card-box2">
                                            <div className="card-center">
                                                <Table
                                                    loading={loading2}
                                                    columns={areaColumns}
                                                    dataSource={carDealerAreaDTOList.list}
                                                    pagination={{
                                                        defaultCurrent: 1,
                                                        total: carDealerAreaDTOList.totalCount,
                                                        onChange: (value) => {
                                                            setParams2({
                                                                ...params2,
                                                                pageIndex: value
                                                            })
                                                        }
                                                    }}
                                                />
                                            </div>
                                        </div>,
                                }
                            ]
                        }
                        onChange={onChange} />
                </div>
            </Modal>

        </>
    )
}
export default TuixiuDetailComponent;